import { observer } from "mobx-react";
import { Tooltip } from 'antd';
import DataSet from "./DataSet";
import Table from "./Table";
import Field from './Field';
import FieldHtmlType from "./FieldHtmlType";
import FieldType from "./FieldType";
import FieldLabel from "./FieldLabel";
import Selections from "./Selections";
import FieldDbType from "./FieldDbType";
import AddRow from "./AddRow";
import DeleteRow from "./DeleteRow";
import DataCondition from "./DataCondition";
import ConditionsettingDialog from '../../../dialog/ConditionsettingDialog';
@observer
export default class FieldProps extends React.Component {
    render() {
        const { store } = this.props;
        const { fieldProps } = store;
        const { tabs, selectedTabKey, selectedIndex, dataSetList, content, isField, label, htmlType, type, isAddRow, isDeleteRow, changeRowControl, table,
            changeFieldLabel, changeDataSet, options, dbType, tableOptions, tableFieldOptions, changeDataSetTable,
            dataSet, dsTable, dsField, changeDataSetField, visible } = fieldProps;
        return (
            <div className="edc-field-props" style={visible ? {} : { right: -320 }}>
                <div className={`toggle${visible ? '' : ' toggle-hidden'}`} onClick={fieldProps.toggle}></div>
                <ol className="edc-tab-nav">
                    {tabs.map((tab, index) => (
                        tab.disabled ?
                            <li className="disabled" key={tab.key} >
                                {index === 0 && <div className="edc-tab-nav-bg" style={{ transform: `translateX(${selectedIndex * 100}%)` }}></div>}
                                <div className="edc-tab-nav-icon">
                                    <i className={tab.icon}></i>
                                </div>
                            </li> :
                            <Tooltip title={tab.title} placement="bottom" >
                                <li className={selectedTabKey === tab.key ? 'selected' : undefined} key={tab.key} onClick={this.clickItem.bind(this, tab.key)}>
                                    {index === 0 && <div className="edc-tab-nav-bg" style={{ transform: `translateX(${selectedIndex * 100}%)` }}></div>}
                                    <div className="edc-tab-nav-icon">
                                        <i className={tab.icon}></i>
                                    </div>
                                </li>
                            </Tooltip>
                    ))}
                </ol>
                <div className="edc-tab-content">
                    {selectedTabKey === '0' && <div>
                        <FieldLabel isField={false} style={{ width: '100%' }} value={content} ></FieldLabel>
                        <DataSet value={dataSet} options={dataSetList.slice()} style={{ width: '100%' }} onChange={changeDataSet}></DataSet>
                        <Table value={dsTable} style={{ width: '100%' }} options={tableOptions} onChange={changeDataSetTable}></Table>
                        <Field
                            before={{
                                value: dsField,
                                onChange: changeDataSetField,
                                style: { width: '100%' },
                                options: tableFieldOptions
                            }}
                            after={{
                                style: { width: '20%' }
                            }} />
                        <DataCondition store={store}></DataCondition>
                        <ConditionsettingDialog store={store} />
                    </div>}
                    {selectedTabKey === '1' && <div>
                        {isField && <FieldLabel value={label} isField={true} style={{ width: '100%' }} onChange={changeFieldLabel} ></FieldLabel>}
                        <FieldHtmlType disabled={true} value={htmlType} isField={isField} style={{ width: '100%' }}></FieldHtmlType>
                        <FieldType disabled={true} htmlType={htmlType} value={type} style={{ width: '100%' }}></FieldType>
                        <FieldDbType disabled={true} fieldType={type && type.value} value={dbType} style={{ width: '100%' }}></FieldDbType>
                        <Selections htmlType={htmlType} options={options}></Selections>
                        {table && isField && <AddRow isField={true} isAddRow={isAddRow} onChange={changeRowControl.bind(this,'add')} ></AddRow>}
                        {table && isField && <DeleteRow isField={true} isDeleteRow={isDeleteRow} onChange={changeRowControl.bind(this,'delete')} ></DeleteRow>}
                    </div>}
                </div>
            </div>
        )
    }
    clickItem = (key) => {
        const { store } = this.props;
        const { fieldProps } = store;
        fieldProps.selectedTabKey = key;
    }
}